import React, { FC, useEffect, useRef, useState } from "react";
import { DatePicker, Button, Pagination, Table, Statistic, Row, Col, Tag, Form, } from 'antd';
import { FileOutlined, ProfileOutlined } from '@ant-design/icons'
import './style.css'
import { useRequest } from '@umijs/hooks'
import { url } from '@/utils/url'
import { fetchRequest } from '@/utils/Request'
import CountUp from 'react-countup';
import { values } from "@antv/util";
import { antvDark } from "bizcharts";
import { anyTypeAnnotation } from "@babel/types";
import imgPc from "../../../images/icon_pc.png"
import imgWhiteCard from "../../../images/icon_whiteCard.png"
import imgDoor from "../../../images/icon_door.png"
import imgWisdomCard from "../../../images/icon_wisdomCard.png"
import imgSim from "../../../images/icon_sim.png"
import imgIncrement from "../../../images/icon_increment.png"
import imgace from "../../../images/icon_face.png"
import {IconFonts} from '../../../utils/Iconfont';

const { RangePicker } = DatePicker;


const format = {
    accessCardCountAll: '门禁注册(累计)',
    accessCardRecordCountAll: '门禁使用人数(新增)',
    newUserCountAll: 'PC端注册用户(新增)',
    userCountAll: 'PC端注册用户(累计)',
    whiteAccessCardRecordCountAll: 'IC白卡(累计)',
    blackAccessCardRecordCountAll: '七芯卡(累计)',
    newBlackAccessCardRecordCountAll: '七芯卡(新增)',
    countGuardianPhoneNewImeiAll: '智能学生证绑定(累计)',
    newCountGuardianPhoneNewImeiAll: '智能学生证绑定(新增)',
    countGuardianPhoneNewImei: '智能学生证(累计)',
    newCountGuardianPhoneNewImei: '智能学生证(新增)',
    pageClickRecords: '学生证页面点击数',
    countWarehousing: '学生证入库(新增)',
    newAccessCardCount: '门禁注册(新增)',
    accessCardRecordCountAllNoTime: '门禁使用人数(累计)',
    newWhiteAccessCardRecordCount: 'IC白卡(新增)'
}
const titileList = {
    'PC端注册用户': [
        {
            title: '累计',
            value: 'userCountAll',
            icon: imgPc
        },
        {
            title: '新增',
            value: 'newUserCountAll',
            icon:imgIncrement
        }
    ],
    '门禁注册': [
        {
            title: '累计',
            value: 'accessCardCountAll',
            icon: imgDoor
        },
        {
            title: '新增',
            value: 'newAccessCardCount',
            icon: imgIncrement
        }
    ],
    '门禁使用人数': [
        {
            title: '累计',
            value: 'accessCardRecordCountAllNoTime',
            icon: imgDoor
        },
        {
            title: '新增',
            value: 'accessCardRecordCountAll',
            icon: imgIncrement
        }
    ],
    '七芯卡': [
        {
            title: '累计',
            value: 'blackAccessCardRecordCountAll',
            icon: imgSim
        },
        {
            title: '新增',
            value: 'newBlackAccessCardRecordCountAll',
            icon: imgIncrement
        }
    ],
    'IC白卡': [
        {
            title: '累计',
            value: 'whiteAccessCardRecordCountAll',
            icon: imgWhiteCard
        },
        {
            title: '新增',
            value: 'newWhiteAccessCardRecordCount',
            icon: imgIncrement
        }
    ],
    '人脸注册': [
        {
            title: '累计',
            value: 'accessCardFaceCountAll',
            icon: imgace
        },
        {
            title: '新增',
            value: 'newAccessCardFaceCount',
            icon: imgIncrement
        }
    ],
    '智能学生证': [
        {
            title: '累计',
            value: 'countGuardianPhoneNewImei',
            icon: imgWisdomCard
        },
        {
            title: '新增',
            value: 'newCountGuardianPhoneNewImei',
            icon: imgIncrement
        }
    ],
    '智能学生证绑定': [
        {
            title: '累计',
            value: 'countGuardianPhoneNewImeiAll',
            icon: imgWisdomCard
        },
        {
            title: '新增',
            value: 'newCountGuardianPhoneNewImeiAll',
            icon: imgIncrement
        }
    ],
    '学生证': [
        {
            title: '学生证页面点击数',
            value: 'pageClickRecords',
            icon: imgWisdomCard
        },
        {
            title: '学生证入库(新增)',
            value: 'countWarehousing',
            icon: imgIncrement
        }
    ]
}



const AllSchoolDetail: FC = () => {
    const timer = useRef<string[]>([])
    const [keyValue, setKeyValue] = useState<any>({start:'',end:''})
    const {
        tableProps,
        run,
        loading
    } = useRequest(((current, startDate: string, endDate: string) => fetchRequest(url.GET_SCHOOL_ALL, {
        pageSize: current.pageSize,
        pageStart: current.current,
        startDate,
        endDate
    })), {
        paginated: true,
        formatResult: (response: any) => {
            return {
                list: response.data.rows,
                total: response.data.total
            };
        }
    })

    const {
        data,
        error,
        run: contRun

    } = useRequest((startDate: string, endDate: string) => fetchRequest(url.GET_CUMULATIVE, {
        startDate,
        endDate
    }))
    // console.log(data)

    const columns = [
        {
            title: '学校名称',
            dataIndex: 'collegeName',
        },
        {
            title: "门禁注册(新增)",
            dataIndex: "newAccessCardCount"
        },
        {
            title: '门禁使用人数（新增）',
            dataIndex: 'newAccessCardRecordCount',
        },
        {
            title: '七芯卡(新增)',
            dataIndex: 'newBlackCount',
        },
        {
            title: 'IC白卡(新增)',
            dataIndex: 'newWhiteCount',
        },

        {
            title: '智能学生证(新增)',
            dataIndex: 'newWisdomCardCount',
        },
        {
            title: '人脸注册(新增)',
            dataIndex: 'newAccessCardFaceCount',
        },

        {
            title: 'pc端注册用户(新增)',
            dataIndex: 'newUserCount',
        }

    ];

    const handleTime =()=>{
        setKeyValue({start:'',end:''})
    }
    /*点击搜索按钮*/
    const handleSearch = async () => {

        await run({ pageSize: 10, current: 1 }, timer.current[0], timer.current[1])
        await contRun(timer.current[0], timer.current[1]);
    }
    /**/
    const onChange = (date: any, dateString: any) => {
        timer.current = dateString
        setKeyValue(date)
    }
    
    const search = (<div className="search-forms">
        <div className='all-title'>周报数据：</div>
        <div className='search-forms-search'>
            <span className='search-forms-search-title'>周报时间：</span>
            <RangePicker onChange={onChange} 
            value = {keyValue}
            />
            <Button type={'primary'} onClick={handleSearch} loading={loading} className={'search-form-btn'} >搜索</Button>
            <Button style={{ marginLeft: '8px' }} onClick={handleTime}>重置</Button>
        </div>

    </div>)

    const tableRender = (<>
        <Table className={'table-form'} columns={columns} rowKey="collegeId" {...tableProps as any} />
    </>)

    const allDataRender = () => {
        return (
            
                <div className='all-data-wrapper'>
                {/* {Object.keys(data?.data).map((key) => (<div className={'all-data-item'} key={key}>
                    <div className={'all-data-title'}>{format[key]}:</div>
                    <CountUp duration={2} end={data?.data[key]} className={'all-data-count'} />
                </div>))
                } */}
                {Object.keys(titileList).map((key) => (<div className={'all-data-item'} key={key}>
                    <div className={'all-data-title'}>{key}:</div>
                    <div className='all-data-center-box'>
                    {
                        titileList[key].map((value: any) => (
                            <div key={value.value} className='all-data-box'>
                                <span className='all-data-box-title'> 
                                {/* <IconFonts type="icon-rili1" style={{marginRight:'12px'}}></IconFonts> */}
                                {/* {value.icon === 1 ? <span className='incoName'><IconFonts type="icon-renlianshibie" style={{marginRight:'12px'}}></IconFonts></span>:<img src={value.icon} alt="" style={{ marginRight: '12px' }}/>} */}
                                    <img src={value.icon} alt="" style={{ marginRight: '12px' }}/>
                                    <span className='all-data-box-text'>{value.title}:</span></span>
                                {/* <span>{data?.data[value.value]}</span> */}
                                <CountUp duration={2} end={data?.data[value.value]} className={'all-data-count'} />
                            </div>
                        ))
                    }
                    </div>
                </div>
                ))
                }
            </div>
        )
    }

    return (<>
        {search}
        {data?.data && allDataRender()}
        {tableRender}
    </>)
}


export default AllSchoolDetail
